@charset "utf-8";
@import "common";
$bgcolor-login:#f7f7f7;

header,.content{
	background-color: $bgcolor-login;
	.align-right{
		text-align: right;
		padding-right: 3%;
	}
}
.content{
	position: absolute;
	top:heightRel(88px);
	bottom:heightRel(99px);
	width: 100%;
	overflow-x: hidden;
	background: #ffffff;
	.data{
		width: 100%;
		height: heightRel(300px);
		background: url(../img/data-bg.jpg) no-repeat center center/100% 100%;		
		color: #fefefe;
			h4,p,h5{
				text-align: center;
				font-weight: normal;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			h4{
				font-size: heightRel(50px);
			}
			p,h5{
				font-size: heightRel(24px);
			}
			
		.income{
			height: heightRel(200px);
			display: flex;
			align-items: center;
			justify-content: center;
			p{
				margin-top: heightRel(17px);
			}
		}			
		.data-bottom{
			display: flex;
			height: heightRel(100px);
			background: rgba(0,0,0,.2);
			div{
				width:33.33%;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;
					span{
						display: block;
						width: heightRel(10px);
						height:  heightRel(10px);
						background: white;
						border-radius: 50%;
						position: absolute;
						right:35%;
						top: 10%;
						i{
							display: block;
							width: heightRel(8px);
							height:  heightRel(8px);
							background: red;
							border-radius: 50%;
							position: absolute;
							bottom: 0;
							top: 0;
							right: 0;
							left: 0;
							margin: auto;
						}
					}
				padding-top: heightRel(16px);
				p{
					margin-top: heightRel(9px);
				}
				
			}
		}
	}
	.add-product{
		background: #f3f4f6;
		padding-top:heightRel(20px);
		padding-bottom:heightRel(20px);
		a{
			display: flex;
			justify-content: center;
			align-items: center;
			width:93.7%;
			background: white;
			margin: 0 auto;
			border-radius: 8px;
			border: 1px solid #e4e4e4;
			padding: heightRel(17px);
			color:#fd3636 ;
			span{
				width: heightRel(34px);
				height:heightRel(36px) ;
				overflow: hidden;
				margin-right: 3%;
				img{
					width: 100%;
					height: 100%;
				}
			}
			p{
				font-size: heightRel(28px);
			}
		}
	}
	.function-list{
		display: flex;
		flex-wrap: wrap;
		border-top: 1px solid #e3e3e3;
		border-bottom: 1px solid #e3e3e3;
		>div{
			width: 33.33%;
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			padding-top: heightRel(53px);
			padding-bottom: heightRel(55px);
			position: relative;
			>span{
				display: block;
				height: heightRel(33px);
				width:heightRel(33px) ;
				position: absolute;
				top: heightRel(23px);
				right: 15%;
				background: url(../img/icon-message.png) no-repeat center center/100% 100%;
				line-height: normal;
			}
			div{
				height: heightRel(88px);
				background: url(../img/icon-01.png) no-repeat center center/auto 100%;
			}
			.icon-02{
				background-image: url(../img/icon-02.png);
			}
			.icon-03{
				background-image: url(../img/icon-03.png);
			}
			.icon-04{
				background-image: url(../img/icon-04.png);
			}
			.icon-05{
				background-image: url(../img/icon-05.png);
			}
			.icon-06{
				background-image: url(../img/icon-06.png);
			}
			p{
				text-align: center;
				margin-top: heightRel(35px);
				color:#999999;
			}
		}
		.border{
			border-left: 1px solid #e3e3e3;
			border-right: 1px solid #e3e3e3;
		}
		.line{
			width: 100%;
			height: 1px;
			background: #e3e3e3;
			padding: 0;
		}
	}
}

footer{
	height: heightRel(99px);
	display: flex;
	border-top: 1px solid #c1c1c1;
	padding-top: heightRel(14px);
	>div{
		width: 25%;
		position: relative;
		div{
			height:heightRel(42px) ;
			margin: 0 auto;
			width: 28.1%;
			overflow: hidden;
			text-align: center;
			line-height: normal;
			position: relative;
			img{
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				height: 100%;
			}
			img:nth-child(2){
				opacity: 0;
			}
		}
		span{
			position: absolute;
			display: block;
			width: heightRel(21px);
			height: heightRel(21px);
			top: 0;
			right: 31%;
			border-radius: 50%;
			font-size:heightRel(15px) ;
			background: red;
			line-height: normal;
			color: white;
		}
	}
	.active{
		img:first-child{
			opacity: 0;
		}
		img:nth-child(2){
			opacity: 1;
		}
	}
	p{
		line-height: 2;
		font-size: heightRel(20px);
	}
}
